<template>
  <div id="app">
    <h1>{{titleName}}</h1><hr>
    <router-view/>

  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: 'App',
  methods:{
    // initFun:function () {
    //   //设置body背景图片，本来想用vue的ref的，但是ref好像不支持放在body 只支持div？？
    //   axios.get("http://localhost:8080/getapi1").then(
    //       response =>{
    //         response = "https://cn.bing.com"+response.data.MediaContents[0].ImageContent.Image.Url
    //         let number = response.lastIndexOf("&rf");
    //         response = response.substring(0,number);
    //         response = response.replace('1920x1080','768x1366');
    //         console.log(response);
    //         document.getElementById("bodyid").setAttribute("style","background-image: url('"+response+"')")
    //       }
    //   );
    //   this.$router.push({path:'/mainPage'})
    // },

    getJsonpFun:function () {

      let Base64 = require('js-base64').Base64
      // var url ='https://cn.bing.com/th?id=OHR.ElTajo_EN-CN2859067222_768x1366.jpg';
      //从cookie读取url背景数据，添加到背景
      // this.setCookie("familyvuegitee_background",url,20);

      let cookie = this.getCookie("familyvuegitee_background");
      let cookieIphoneName = this.getCookie("familyvuegitee_iphoneName");

      //使用base64解密
      cookieIphoneName = Base64.decode(cookieIphoneName);

      this.titleName = this.titleName+cookieIphoneName;
      if (cookie==undefined || cookie==''){
        cookie = 'https://cn.bing.com/th?id=OHR.WinterWaxwing_EN-CN5209945240_768x1366.jpg';
      }


      document.getElementById("bodyid").setAttribute("style","background-image: url('"+cookie+"')")

      //设置完成背景跳转main

      this.$router.push({path:'/mainPage'})

    },
    //获取cookie
    getCookie: function (cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      // console.log("获取cookie,现在循环")
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        // console.log(c)
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1){
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("username", "", -1);
    },
    checkCookie: function () {
      var user = this.getCookie("username");
      if (user != "") {
        alert("Welcome again " + user);
      } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
          this.setCookie("username", user, 365);
        }
      }
    }
  },
  data(){
    return{
      titleName :"Hello "
    }
  },

  created() {
   // this.initFun();

    this.getJsonpFun();
  }
}
</script>





<style>

html{
  width: 100%;
  height: 100%;
}
body{
  /*background-image: url("https://cn.bing.com/th?id=OHR.ElTajo_ZH-CN2134749418_768x1366.jpg");*/
  width: 100%;
  height: 100%;
  /* 以下是把图片尺寸适配到手机 */
  background-size:100% 100%;
  /*background-attachment: fixed;*/
  /*background-repeat: repeat;*/

  /*下面是设置背景添加浅白色背景*/
  /*-webkit-filter: opacity(50%);*/
  /*filter: opacity(50%);*/
}
h1{
  color: cornsilk;
}
</style>
